<template>
<div>
  <el-input v-model="resPage.data.nickName" placeholder="账号昵称" clearable style="width: 150px"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <el-input v-model="resPage.data.account" placeholder="账号" clearable style="width: 150px"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <el-date-picker
    v-model="resPage.data.startTime"
    timestamp
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期">
  </el-date-picker>
  <el-button icon="el-icon-search" circle @click="search"></el-button>
  <el-button v-if="permis" type="success" round size="mini" @click="create">新 增</el-button>
  <el-table
    :data="page.data"
    stripe
    style="width: 100%">
    <el-table-column
      prop="account"
      label="账号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="nickName"
      label="账号昵称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="loginTime"
      label="登录时间"
      width="180">
    </el-table-column>
    <el-table-column
      prop="state"
      label="状态"
      width="180">
      <template scope="scope">
        <div>
          {{ scope.row.state === 1 ? '启用' : '禁用' }}
        </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="avatar"
      label="头像"
      width="180">
      <template scope="scope">
        <el-popover placement="top-start" trigger="click"> <!--trigger属性值：hover、click、focus 和 manual-->
          <a :href="scope.row.avatar" target="_blank" title="查看最大化图片">
            <img :src="scope.row.avatar" style="width: 480px;height: 350px">
          </a>
          <img slot="reference" :src="scope.row.avatar" style="width: 70px;height: 45px; cursor:pointer">
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template slot-scope="scope">
        <el-button v-if="permis" type="primary" round size="mini" @click="center(scope.row)">详 细</el-button>
        <el-button type="primary" round size="mini" @click="edit(scope.row)">编 辑</el-button>
        <el-button v-if="permis"  type="warning" round size="mini" @click="disable(scope.row)">
          {{ scope.row.state === 1 ? '禁 用' : '启 用' }}
        </el-button>
        <el-button v-if="permis"  type="danger" round size="mini" @click="deleted(scope.row)">删 除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <br/>
  <div class="block" style="text-align: right">
    <el-pagination
      background
      :page-size="page.size"
      :page-sizes="[5, 10, 20, 30]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.totalCount"
      :current-page="page.index"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
    </el-pagination>
  </div>
<!--编辑-->
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="30%"
  >
    <el-form ref="form" :model="resData" label-width="80px">
      <el-form-item label="账 号">
        <el-input v-model="resData.account" @blur="verifyAccount()"></el-input>
      </el-form-item>
      <el-form-item v-if="showElAdd" label="昵 称">
        <el-input v-model="resData.nickName"></el-input>
      </el-form-item>
      <el-form-item v-if="showElAdd" label="密 码">
        <span style="color: red">: 默认888888</span>
        <el-input v-model="resData.password"></el-input>
      </el-form-item>
      <el-form-item v-if="showEl" label="昵 称">
        <div>{{resData.nickName}}</div>
      </el-form-item>
      <el-form-item v-if="showEl" label="登录时间">
        <div>{{resData.loginTime}}</div>
      </el-form-item>
      <el-form-item v-if="showEl" label="修改时间">
        <div>{{resData.updateTime}}</div>
      </el-form-item>

      <el-form-item label="头像">
        <el-upload
          class="upload-demo"
          action="http://localhost:8881/file/upload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="success"
          :limit="1"
          :file-list="fileList"
          list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10mb <span style="color: red">先删除在上传</span> </div>
        </el-upload>
      </el-form-item>

      <el-form-item label="状态">
        <el-switch
          v-model="value"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="启 用"
          inactive-text="禁 用">
        </el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">{{ title }}</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!--个人中心-->
  <el-dialog
    :title="centerTitle"
    :visible.sync="centerDialogVisible"
    width="30%"
  >
    <el-form ref="form" :model="centerDto" label-width="80px">
      <div>
        <el-form-item label="账号id">
          {{ centerDto.id }}
        </el-form-item>
        <el-form-item label="账号">
          {{ centerDto.account }}
        </el-form-item>
        <el-form-item label="密码">
          {{ centerDto.password }}
        </el-form-item>
        <el-form-item label="昵称">
          {{ centerDto.nickName }}
        </el-form-item>
        <el-form-item label="头像">
          <el-popover placement="top-start" trigger="click"> <!--trigger属性值：hover、click、focus 和 manual-->
            <a :href="centerDto.avatar" target="_blank" title="查看最大化图片">
              <img :src="centerDto.avatar" style="width: 480px;height: 350px">
            </a>
            <img slot="reference" :src="centerDto.avatar" style="width: 150px;height: 80px; cursor:pointer">
          </el-popover>
        </el-form-item>
        <el-form-item label="创建时间">
          {{ centerDto.createTime }}
        </el-form-item>
        <el-form-item label="修改时间">
          {{ centerDto.updateTime }}
        </el-form-item>
        <el-form-item label="登录时间">
          {{ centerDto.loginTime }}
        </el-form-item>
        <el-form-item label="权限">
          {{ centerDto.permis }}
        </el-form-item>
        <el-form-item label="状态">
          <el-switch
            v-model="centerDto.state === 1"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="启 用"
            inactive-text="禁 用">
          </el-switch>
        </el-form-item>
      </div>
    </el-form>
  </el-dialog>
</div>
</template>

<script>
import { page } from '@/api/user'
import { disable, enable, verifyAccount } from '@/api/account'
import { deleted } from '@/api/account'
import { deleteFile } from '@/api/file'
import { create } from '@/api/account'
import { edit } from '@/api/account'

export default {
  name: 'Index',
  data() {
    return {
      centerTitle: '',
      centerDialogVisible: false,
      centerDto: {},
      permis: true,
      showElAdd: false,
      showEl: false,
      value: true,
      title: '',
      fileList: [{
        name: 'food.jpeg',
        url: ''
      }],
      deletedDTO: {},
      dialogVisible: false,
      resData: {},
      page: [],
      resPage: {
        data: {
          startTime: null
        },
        index: 1,
        size: 5
      }
    }
  },
  created() {
    this.list()
    this.permis = localStorage.getItem('permis') === 'admin'
  },
  methods: {
    list() {
      page(this.resPage).then(res => {
        if (res.code === 200) {
          console.log(res)
          this.page = res.data
        }
      })
    },
    search() {
      console.log('1111111')
      console.log(this.resPage.data.startTime)
      if (this.resPage.data.startTime !== null) {
        this.resPage.data.endTime = this.resPage.data.startTime[1]
        this.resPage.data.startTime = this.resPage.data.startTime[0]
      }
      console.log(this.resPage.data.startTime)
      console.log(this.resPage.data.endTime)
      this.list()
    },
    edit(row) {
      console.log(row)
      this.fileList[0].url = row.avatar
      this.showElAdd = false
      this.showEl = true
      this.value = row.state === 1
      this.resData = row
      this.title = '编 辑'
      this.dialogVisible = true
    },
    create() {
      console.log(111)
      this.fileList[0].url = null
      this.showEl = false
      this.showElAdd = true
      this.title = '新 增'
      this.resData = {}
      this.dialogVisible = true
    },
    disable(row) {
      console.log(row.state)
      const msg = row.state === 0 ? ' 启用 ' : ' 禁用 '
      this.$confirm('此操作将' + msg + '该账号, 是否继续?', msg, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (row.state === 0) {
          enable(row.id).then(res => {
            if (res.code === 200) {
              this.$message.success(msg + '成功')
              this.list()
            }
          })
        } else {
          disable(row.id).then(res => {
            if (res.code === 200) {
              this.$message.success(msg + '成功')
              this.list()
            }
            this.$message.error(res.msg)
          })
        }
      }).catch(() => {
        this.$message.info('已取消' + msg)
      })
    },
    handleCurrentChange(val) {
      this.resPage.index = val
      this.list()
    },
    handleSizeChange(val) {
      this.resPage.size = val
      this.list()
    },
    onSubmit() {
      this.resData.state = this.value === true ? 1 : 0
      console.log(this.resData)
      if (this.resData.id == null) {
        console.log('新增')
        create(this.resData).then(res => {
          if (res.code === 200) {
            this.$message.success(this.title + '成功')
            this.list()
            this.dialogVisible = false
          } else {
            this.$message.error(this.title + '失败')
            this.dialogVisible = false
          }
        })
      } else {
        console.log('编辑')
        console.log(this.resData)
        edit(this.resData).then(res => {
          console.log('111111111')
          console.log(res)
          if (res.code === 200) {
            this.$message.success(this.title + '成功')
            this.list()
            this.dialogVisible = false
          } else {
            this.$message.error(this.title + '失败')
            this.dialogVisible = false
          }
        })
      }
    },
    deleted(row) {
      this.$confirm('此操作将永久删除该账号, 是否继续?', '删 除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleted(row.id).then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功')
            this.resPage.index = 1
            this.list()
          } else {
            this.$message.error('删除失败')
          }
        })
      }).catch(() => {
        this.$message.info('取消删除')
      })
    },
    verifyAccount() {
      verifyAccount(this.resData.account).then(res => {
        if (!res.data) {
          this.$message.error('该账号被占用')
        }
      })
    },
    handleRemove(file) {
      this.deletedDTO = {
        id: this.resData.id,
        imgUrl: file.url,
        type: 0
      }
      if (file.url !== null) {
        deleteFile(this.deletedDTO).then(res => {
          if (res.code === 200) {
            this.$message.success('操作成功')
          }
        })
      }
    },
    handlePreview(file) {
      if (file.url !== null) {
        window.location.href = file.url
      }
    },
    success(response) {
      console.log(response)
      this.resData.avatar = response.msg
    },
    cancel() {
      this.list()
      this.dialogVisible = false
    },
    center(row) {
      console.log(row)
      this.centerDto = {}
      this.centerTitle = '个人中心'
      this.centerDto = row
      this.centerDialogVisible = true
    }
  }
}
</script>

<style scoped>

</style>
